// src/components/Sidebar/Sidebar.tsx
import React from 'react';
import { Menu, Layout} from 'antd';
import { 
  HomeOutlined, 
  MenuOutlined, 
  UserOutlined, 
  MessageOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';

const { Sider } = Layout;

const Sidebar: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const getSelectedKey = () => {
    const path = location.pathname.toLowerCase();
    
    if (path === '/' || path === '/home') return 'home';
    if (path === '/categorydetail') return 'category';
    if (path === '/community') return 'community';
    if (path === '/message') return 'message';
    if (path === '/setting' || path === '/mine') return 'mine';
    
    return 'home';
  };

  const handleMenuClick = (key: string) => {
    const routes: { [key: string]: string } = {
      home: '/home',
      category: '/CategoryDetail',
      community: '/community',
      message: '/message',
      mine: '/mine',
    };
    
    if (routes[key]) {
      navigate(routes[key]);
    } 
  };

  const selectedKey = getSelectedKey();

  return (
    <Sider width={200} style={{ 
      background: 'transparent', 
      borderRight: '1px solid #eee', 
      display: 'flex', 
      flexDirection: 'column',
      position: 'relative'
    }}>
      {/* Logo 区域 */}
      <div style={{ 
        padding: '20px 0', 
        textAlign: 'center',
        cursor: 'pointer'
      }} onClick={() => navigate('/home')}>
        <img src={'/logo.png'} alt="Logo" style={{ width: 100, marginBottom: 8 }} />
      </div>

      {/* 导航菜单 */}
      <div style={{ flex: 1, overflow: 'auto' }}>
        <Menu
          mode="vertical"
          selectedKeys={[selectedKey]}
          onSelect={({ key }) => handleMenuClick(key)}
          style={{ 
            borderRight: 0, 
            background: 'transparent',
            borderTop: 'none'
          }}
        >
          <Menu.Item key="home" icon={<HomeOutlined />} style={{ padding: '0 20px' }}>
            首页
          </Menu.Item>
          <Menu.Item key="category" icon={<MenuOutlined />} style={{ padding: '0 20px' }}>
            分类
          </Menu.Item>
          <Menu.Item key="community" icon={<UserOutlined />} style={{ padding: '0 20px' }}>
            社区
          </Menu.Item>
          <Menu.Item key="message" icon={<MessageOutlined />} style={{ padding: '0 20px' }}>
            消息
          </Menu.Item>
          <Menu.Item
            key="mine"
            icon={<UserOutlined />}
            style={{
              color: selectedKey === 'mine' ? '#d4a05b' : 'inherit',
              fontWeight: selectedKey === 'mine' ? 'bold' : 'normal',
              padding: '0 20px',
            }}
          >
            我的
          </Menu.Item>
        </Menu>
      </div>
    </Sider>
  );
};

export default Sidebar;